<template>
    <view class="login" :style="{'background-image':'url('+ bgUrl +')'}">
        <view class="title">
            <text>手机登录/注册</text>
            <view style="color: #fff;">若该手机首次登陆，我们将自动为您注册</view>
        </view>

        <view class="formBox">
            <view class="inputLine">
                <label>
                    +86
                </label>

                <input placeholder="请输入手机号" v-model="tel" type="number" maxlength="11"
                    placeholder-style="color: #A9ACB8" class="phoneNum"></input>
                <view class="close_btn" @click="clearInput">
                    <image src="@/static/imgs/login/close.png"></image>
                </view>
            </view>

            <view class="btnLine loginBox">
                <button type="default" @tap="forCheck">立即登录</button>
            </view>

            <view
                style="display: flex;margin-top: 60rpx;align-items: center;justify-content: center;font-size: 12px;color: #303133;">
                <view>
                    <u-checkbox-group v-model="agree" size="14">
                        <u-checkbox activeColor="#3f6bb0" name="agree" label="已阅读并同意" labelSize="12" labelColor="#303133"></u-checkbox>
                        <view style="color: #3f6bb0;" @click="_toUrl('/index/index/document/id/1.html')">《服务协议》</view>
                        <view style="color: #303133;">和</view>
                        <view style="color: #3f6bb0;" @click="_toUrl('/index/index/document/id/3.html')">《隐私政策》</view>
                    </u-checkbox-group>
                </view>
                <!-- <view style="color: #3f6bb0;" @click="_toUrl('/index/index/document/id/1.html')">《服务协议》</view>
                <view>和</view>
                <view style="color: #3f6bb0;" @click="_toUrl('/index/index/document/id/3.html')">《隐私政策》</view> -->
            </view>
        </view>

        <view class="agree">
            <view class="notice">
                <!-- <text class="reads text_center warp">
                    阅读并同意
                    <text class="txt" @click="_toUrl('/index/index/document/id/1.html')">《服务协议》</text>
                    <text class="txt" @click="_toUrl('/index/index/document/id/3.html')">《隐私政策》</text>
                </text> -->

                <text class="text_center warp">
                    客服电话 400-8899-762 工作时间:9:30-18:30
            	   </text>

                <text class="text_center warp">
                  		未成年人投诉举报渠道同上
                </text>

                <view class="text_center warp">
                    <text @click="_toUrl('/index/index/document/id/5.html')">人力资源服务许可证</text>
                    <text style="margin-left: 15rpx;" @click="_toUrl('/index/index/document/id/4.html')">营业执照</text>
                </view>


            </view>
        </view>
    </view>
</template>

<script>
    import agreement from "../commponent/agreement.vue";
    import loginBg from "../../static/imgs/login/loginBg_md.png";
    export default {
        data() {
            return {
                bgUrl: loginBg,
                tel: '',

                agree: [],
            };
        },
        components: {
            agreement
        },
        props: {},

        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function(options) {
            // #ifdef MP-WEIXIN
            // this.wxlogin(); //小程序获取用户code
            // #endif
        },

        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady: function() {},

        /**
         * 生命周期函数--监听页面显示
         */
        onShow: function() {
            // this.setbImg();  //动态切换背景
        },

        /**
         * 生命周期函数--监听页面隐藏
         */
        onHide: function() {
            // clearInterval(this.imgTime);
        },

        /**
         * 生命周期函数--监听页面卸载
         */
        onUnload: function() {
            // clearInterval(this.imgTime);
        },

        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh: function() {},

        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function() {},

        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function() {},
        methods: {

            clearInput() {
                // console.log('点击清除')
                this.setData({
                    tel: ""
                })
            },
            forCheck() {
                console.log(this.tel);
                if(!this.agree[0]) {
                    return this._toast('请同意《服务协议》和《隐私政策》');
                }
                if (/^1[\d]{10}$/.test(this.tel)) {
                    this._ajax({
                        url: '/api/sms/send',
                        data: {
                            mobile: this.tel,
                            event: 'register'
                        },
                        success: res => {
                            if (res.code == 1) {
                                uni.navigateTo({
                                    url: '/pages/login/check?mobile=' + this.tel
                                })
                            } else {
                                this._toast(res.msg);
                            }
                        }
                    }, 1);
                } else {
                    this._toast('请输入正确的手机号');
                }
            }

        }
    };
</script>

<style scoped lang="less">
    .login {
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        transition: all 0.6s ease-in-out;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;


        .title {
            padding: 240rpx 50rpx 60rpx;

            text {
                width: 201px;
                height: 31px;
                font-size: 60upx;
                font-weight: bold;
                line-height: 51px;
                color: #FFFFFF;
                letter-spacing: 8upx;
                opacity: 1;
            }
        }

        .formBox {
            width: 100%;
            margin: 240rpx auto 60rpx;
            margin-left: auto;


            .inputLine {
                width: 590upx;
                margin: 0 auto;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #F5F6FA;
                position: relative;

                label {
                    width: 120upx;
                    color: #73747A;
                    font-size: 26upx;
                }

                .phoneNum {
                    font-size: 28rpx;
                    width: calc(100% - 120upx);
                    height: 80rpx;
                }

                .close_btn {
                    image {
                        width: 30upx;
                        height: 30upx;
                        position: absolute;
                        right: 10upx;
                        bottom: 25rpx;
                        z-index: 2;
                    }

                }
            }

        }

        .btnLine {
            margin-top: 98upx;

            button {
                background-color: #456eaf;
                color: #fff;
            }
        }

    }

    .agree {
        margin-top: auto;
        padding-bottom: 60rpx;

        .notice {
            text {

                font-size: 20upx;
             		 margin-bottom: 18upx;

                &:nth-child(1) {
                    margin-bottom: 40upx;
                }

            }

            .warp {
                display: block;

            }

        }
    }
</style>
